<script lang="ts">
  import type { NodeProps } from "@xyflow/svelte";
  import NodeWrap from "../common/NodeWrap.svelte";
  import type { ExDrawNodeInfo } from "$lib/api/board/board_draw";
  import { MessageCircleMore } from "lucide-svelte";

  const props: NodeProps = $props();
  const nodeInfo = $derived(props.data as ExDrawNodeInfo);
</script>

<NodeWrap nodeProps={props} showBorder showBgColor showResizer>
  <div class="flex flex-col h-full">
    <div class="flex gap-2 pl-1">
      <MessageCircleMore />
      提问
    </div>
    {#if nodeInfo.content.LlmAskContent?.content == ""}
      <div class="m-2 p-1 text-wrap break-all ring-1 text-primary-600-400">
        请输入问题
      </div>
    {:else}
      <pre
        class="m-2 p-1 text-wrap break-all ring-1 flex-1 overflow-auto nowheel">{nodeInfo
          .content.LlmAskContent?.content ?? ""}</pre>
    {/if}
  </div>
</NodeWrap>
